<template>
  <div class="indicator">
    <div class="content" ref="contentRef">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      contentRef: null
    };
  },
  mounted() {
    this.contentRef = this.$refs.contentRef;
    this.watchIndexChange();
  },
  updated() {
    this.watchIndexChange();
  },
  methods: {
    watchIndexChange() {
      if (!this.contentRef) return;
      // 父元素的可视宽度
      const parentNodeWidth = this.contentRef.clientWidth;
      // 父元素的总宽度
      const parentNodeScrollWidth = this.contentRef.scrollWidth;
      // 子元素的宽度
      const childrenNodeWidth = this.contentRef.children[this.index].clientWidth;
      // 子元素偏移自己最近定位的父元素的偏移量
      const childrenNodeOffsetLeft = this.contentRef.children[this.index].offsetLeft;
      // 滚动宽度
      let rollingWidth = childrenNodeOffsetLeft + childrenNodeWidth * 0.5 - parentNodeWidth * 0.5;
      // 如果滚动宽度<0，则将它设置为0，也就是让它到0的时候不再滚动。
      if (rollingWidth < 0) {
        rollingWidth = 0;
      }
      // 如果滚动宽度<最大可滚动宽度，则将它设置为最大可滚动宽度，也就是让它到最大可滚动宽度的时候不再滚动。
      if (rollingWidth > parentNodeScrollWidth - parentNodeWidth) {
        rollingWidth = parentNodeScrollWidth - parentNodeWidth;
      }
      // 使用transform整个元素，并设置过渡效果
      this.contentRef.style.transform = `translate(${-rollingWidth}px)`;
    }
  }
};
</script>

<style lang="scss" scoped>
.indicator {
  overflow: hidden;
  .content {
    position: relative;
    display: flex;
    align-items: center;
    transition: transform 300ms ease;
    > * {
      flex-shrink: 0;
    }
  }
}
</style>
